<template>
  <!--金卡完善资料-->
  <div class="ziliao">
    <div class="content">
      <p>请与乘机证件一致 <img src="../../../assets/saoyisao.png" @click="goShibie()" v-if="identityType.identityType==1"></p>
      <span @click="goJump()">跳过 <img :src="src" alt="" height="10"></span>
    </div>
    <wv-group title="姓名">
      <wv-input placeholder="如英文名请按照Lastname(姓)/firstname(名)" v-model="privatedata.userName"></wv-input>
    </wv-group>
    <wv-group title="证件类型">
      <wv-cell
        title="证件类型"
        is-link
        :value="identityType.identityTypeDesc"
        @click.native="identityTypePickerShow = true"
      />
      <wv-picker
        :visible.sync="identityTypePickerShow"
        :columns="identityTypeColumns"
        value-key="identityTypeDesc"
        @confirm="confirmIdentityType"
      />
    </wv-group>

    <wv-group title="身份证号" v-if="identityType.identityType==1">
      <wv-input placeholder="请输入身份证号" type="text" v-model="privatedata.identityNo"></wv-input>
    </wv-group>

    <div v-if="identityType.identityType!=1">
      <div class="inlines" v-if="identityType.identityType!=5">
        <wv-group title="英文姓" class="xing">
          <wv-input placeholder="英文姓" v-model="privatedata.lastName"></wv-input>
        </wv-group>
        <wv-group title="英文名" class="names">
          <wv-input placeholder="英文名" v-model="privatedata.firstName"></wv-input>
        </wv-group>
      </div>
      <wv-group title="性别" v-if="identityType.identityType!=5">
        <wv-cell
          title="性别"
          is-link
          :value="sex.sexDesc"
          @click.native="sexPickerShow = true"
        />
        <wv-picker
          :visible.sync="sexPickerShow"
          value-key="sexDesc"
          :columns="sexColumns"
          @confirm="confirmSex"
        />
      </wv-group>
      <wv-group title="出生日期" v-model="privatedata.birthDate=birthDate">
        <wv-cell
          title="出生日期"
          :value="birthDate"
          is-link
          @click="openPicker('birthTimeDatePicker')"
        />
        <wv-datetime-picker
          type="date"
          ref="birthTimeDatePicker"
          :startDate="birthStartTimeDate"
          v-model="birthTimeDate"
          @confirm="onConfirm"
        />
      </wv-group>
      <wv-group title="国籍" class="names" v-if="identityType.identityType!=5">
        <wv-input placeholder="请填写国籍" v-model="privatedata.nationality"></wv-input>
      </wv-group>
      <wv-group title="签发地" class="names" v-if="identityType.identityType!=5">
        <wv-input placeholder="请填写证件签发国家/地区" v-model="privatedata.issueAt"></wv-input>
      </wv-group>
      <wv-group title="证件号">
        <wv-input placeholder="请输入证件号" type="text" v-model="privatedata.identityNo"></wv-input>
      </wv-group>
      <wv-group title="有效期" v-model="privatedata.expiryDate=expiryDate" v-if="identityType.identityType!=5">
        <wv-cell
          title="有效期"
          :value="expiryDate"
          is-link
          @click="openPicker('expiryTimeDatePicker')"
        />
        <wv-datetime-picker
          type="date"
          ref="expiryTimeDatePicker"
          v-model="expiryTimeDate"
          @confirm="onConfirm"
        />
      </wv-group>
    </div>
    <wv-group title="手机号">
      <wv-input placeholder="请输入手机号" type="number" v-model="privatedata.mobile"></wv-input>
    </wv-group>
    <wv-group title="备注" v-show="!jihuo" class="des">
      <wv-textarea placeholder="请输入备注" :rows="6" show-counter max-length="500"></wv-textarea>
    </wv-group>
    <p class="offer" @click="goNext()">确定</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {goPerfectVipcard, userInfo, imgOcrUpload} from '../../../../test/unit/http'
  import VDistpicker from 'v-distpicker'
  import {wxApi} from '../../../../test/unit/flyme_weixin'
  import {Picker, Toast} from 'we-vue'

  export default {
    name: 'wanshanziliao',
    props: {},
    data() {
      return {
        src: require('../../../assets/arrow.png'),
        img: require('../../../assets/close.png'),
        pic: require('../../../assets/right.png'),
        jihuo: false,
        addInp: false,
        birthTimeDate: new Date(),
        expiryTimeDate: new Date(),
        identityTypePickerShow: false,
        birthStartTimeDate: new Date(new Date().setFullYear(new Date().getFullYear() - 100)),
        identityType: [{identityTypeDesc: '身份证', identityType: 1}],
        identityTypeColumns: [
          {
            values: [
              {identityTypeDesc: '身份证', identityType: 1},
              {identityTypeDesc: '护照', identityType: 2},
              {identityTypeDesc: '港澳通行证', identityType: 3},
              {identityTypeDesc: '台胞证', identityType: 4},
              {identityTypeDesc: '其他', identityType: 5}
            ],
            defaultIndex: 0
          }
        ],
        sexPickerShow: false,
        sex: [{sexDesc: '女', sex: 1}],
        sexColumns: [
          {
            values: [
              {sexDesc: '女', sex: 1},
              {sexDesc: '男', sex: 2}
            ],
            defaultIndex: 1
          }
        ],
        privatedata: {
          mobile: '',
          identityNo: '',
          userName: '',
          issueAt: '',
          lastName: '',
          firstName: '',
          birthDate: '',
          nationality: ''
        }
      };
    },
    methods: {
      goJump() {
        this.$router.push({path: '/index'})
      },
      goShibie() {
        let that = this;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            let imgId = res.serverId;
            let params = {
              'imgId': imgId,
              'identityType': that.identityType.identityType
            };
            imgOcrUpload(params).then(res => {
              console.log(res);
              if (res.code == 100) {
                let cardInfo = res.object;
                that.privatedata['identityNo'] = cardInfo.identityNo;
                that.privatedata['userName'] = cardInfo.userName;
                if (identityType == 2) {
                  that.privatedata['issueAt'] = cardInfo.issueAt;
                }
              } else {
                Toast.text("识别出错")
              }
            })
          }
        });
      },
      checkFrom() {
        let privatedata = this.privatedata;
        let msg = {};
        if (this.$myUtils.isNull(privatedata.userName)) {
          msg['result'] = false;
          msg['info'] = '请输入真实姓名';
          return msg;
        }
        if (this.$myUtils.isNull(privatedata.identityType)) {
          msg['result'] = false;
          msg['info'] = '请选择证件类型';
          return msg;
        }
        if (privatedata.identityType != 1) {
          if (privatedata.identityType == 5) {
            if (this.$myUtils.isNull(privatedata.birthDate)) {
              msg['result'] = false;
              msg['info'] = '请选择出生日期';
              return msg;
            }
          }
        }
        if (privatedata.identityType == 1) {
          if (this.$myUtils.isNull(privatedata.identityNo)) {
            msg['result'] = false;
            msg['info'] = '请输入身份证号';
            return msg;
          }
          if (!this.$myUtils.isCardNo(privatedata.identityNo)) {
            msg['result'] = false;
            msg['info'] = '请输入合法的身份证号码';
            return msg;
          }
        } else {
          if (this.$myUtils.isNull(privatedata.identityNo)) {
            msg['result'] = false;
            msg['info'] = '请输入证件号';
            return msg;
          }
        }
        if (this.$myUtils.isNull(privatedata.mobile)) {
          msg['result'] = false;
          msg['info'] = '请输入手机号';
          return msg;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      goPerfect(params) {
        let type = this.$route.query.type;
        goPerfectVipcard(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let accountGoods = res.object;
            let isTiyan = accountGoods.isTiyan;
            if (isTiyan == 0) {
              this.$router.push({
                path: '/huiyuandetail',
                query: {accountGoodsId: accountGoods.accountGoodsId, type: type}
              })
            }
            if (isTiyan == 1) {
              this.$router.push({
                path: '/tiyanquandetail',
                query: {accountGoodsId: accountGoods.accountGoodsId}
              })
            }
          } else {
            Toast.fail(res.info);
          }
        })
      },
      goNext() {
        let checkResult = this.checkFrom();
        if (!checkResult.result) {
          Toast.text(checkResult.info);
          return;
        }
        console.info("checkResult", checkResult);
        let accountGoodsId = this.$route.query.accountGoodsId;
        this.privatedata['accountGoodsId'] = accountGoodsId;
        this.goPerfect(this.privatedata);
      },
      onChange(picker, value) {
        this.$nextTick(() => {
          console.log(picker.getValues());
          console.log(value)
        })
      },
      confirmIdentityType(picker) {
        this.identityType = picker.getValues()[0];
        this.privatedata = {};
        this.privatedata['identityType'] = this.identityType.identityType
      },
      confirmSex(picker) {
        this.sex = picker.getValues()[0];
        this.privatedata['sex'] = this.sex.sex
      },
      openPicker(ref) {
        this.$refs[ref].open()
      },
      onConfirm(value) {
        let message = '';
        if (value !== null && typeof value === 'object') {
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let date = value.getDate();
          let hour = value.getHours();
          let minute = value.getMinutes();
          message = `${year}-${month}-${date} ${hour}:${minute}`
        } else {
          message = value
        }
      }

    },
    created() {
      wxApi.init();
      this.identityType = this.identityTypeColumns[0].values[0];
      this.privatedata['identityType'] = this.identityType.identityType;
      this.privatedata['dataType'] = 1;
      userInfo({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          let account = res.object.account;
          this.privatedata['mobile'] = account.accountName;
        }
      })
    },
    computed: {
      birthDate: {
        get: function () {
          let value = this.birthTimeDate;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            message = `${year}-${month}-${date}`;
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      },
      expiryDate: {
        get: function () {
          let value = this.expiryTimeDate;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            message = `${year}-${month}-${date}`;
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      }
    },
    components: {
      VDistpicker
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .des {
    padding-bottom: 65px;
  }

  .inlines {
    display: flex;
  }

  .xing, .names {
    flex: 1;
  }

  .distpicker-address-wrapper {
    height: 300px;
    overflow: auto;
  }

  .content {
    display: flex;

    p {
      flex: 0 190px;
      font-size: 18px;
      color: #111;
      padding: 25px 0 0 10px;
      display: inline-flex;

      img {
        margin-left: 10px;
        height: 28px;
        width: 28px;
      }
    }

    span {
      position: absolute;
      top: 20px;
      right: 20px;
      color: rgba(255, 255, 255, 0.5);
      background-color: rgba(0, 0, 0, 0.2);
      padding: 3px 7px;
      border-radius: 5px;
      font-size: 12px;

      img {
        vertical-align: middle;
        margin-bottom: 2px;
      }
    }
  }

  .guoji {
    text-align: left;
    padding: 10px 15px 10px;

    p:first-child {
      color: #2e94f0;
      font-size: 14px;
    }

    p:last-child {
      font-size: 17px;
      border-bottom: 1px solid #eee;
      padding: 10px 0;
      color: #666;

      img {
        float: right;
        margin-top: 9px;
      }
    }
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 999;
  }

  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .model .modelContent {
    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 2;
    padding: 30px 10px 20px;
    width: 80%;

    img {
      position: absolute;
      right: 10px;
      top: 10px
    }

    .list {
      height: 100px;
      overflow-y: auto;
      margin-bottom: 20px;
      padding-bottom: 10px;
      text-align: left;
      padding-left: 20px;

      ul {
        overflow: hidden;

        li {
          line-height: 30px;
        }
      }
    }

    .btn {
      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
      }

      :first-child {
        background-color: #ccc;
        margin-right: 20px;
      }

      :last-child {
        background-color: #2f95f0;
      }
    }

  }

</style>
